{% extends 'layout/base.html' %}
{% load static %}

{% block title %} 用户注册 {% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'web/css/account.css' %}" type="text/css"/>
<style>
 .error-msg {
     color: red;
     position: absolute;
     font-size: 12px;
 }
</style>
{% endblock %}

{% block content %}
<div class="account">
    <h2 style="text-align:center; margin-bottom:25px">用户注册</h2>
    <form id="regForm" method="POST" action="/register/" class="form" novalidate>
        {% csrf_token %}
        {# 不采用 class="form-horizontal" 时需要删除多余的 col-xs-* 类，否则无效 #}
        {% for field in form %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {% if field.name == 'code' %}
            <div class="row">
                <div class="col-xs-8">
                    {{ field }}
                    <span class="error-msg"></span>
                </div>

                <div class="col-xs-4">
                    <!-- <input id="btnGetAuthCode" class="btn btn-default" type="submit" value="获取邮箱验证码"> -->
                    <input id="btnGetAuthCode" class="btn btn-default" type="button" value="获取邮箱验证码">
                </div>
            </div>
            {% else %}
            <div>
                {{ field }}
                <span class="error-msg"></span>
            </div>
            {% endif %}
        </div>
        {% endfor %}
        {# 最下面的 注册 按钮与上方元素距离为0，设置 css margin-top 以修正， #}
        <!-- input 按钮在浏览器缩放不等于100%时可能位置不正确，尤其是 110% 缩放时  -->
        <div class="row">
            <div class="col-xs-3">
                <input id="btnRegister" type="button" value="注册" class="btn btn-primary">
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block js %}
<script>
 var csrfMiddleWareToken = $("input[name='csrfmiddlewaretoken']").val();

 // 页面框架加载完之后自动执行函数
 $(function () {
     bindClickBtnGetAuthCode();
     bindClickBtnRegister();

 });
 /*
    函数：为“注册”按钮绑定点击事件
  */
 function bindClickBtnRegister() {
     $('#btnRegister').click(function () {
         $('.error-msg').empty();

         $.ajax({
             url: "{% url 'register' %}",
             method: "POST",
             dataType: "JSON",
             /* dataType: "TEXT", */
             data: $('#regForm').serialize(), // 所有字段 + csrf token
             success: function (res) {
                 console.log(res.status);
                 if (res.status) {
                     location.href = res.newurl;
                     // 若重定向地址不存在于后
                     // 端返回的数据中，比如后端返回的JAON中没有data属性，这时 location.heref = 
                     // res.data 会使浏览器重定向到 /register/undefined/
                 } else {
                     $.each(res.errors, function (fieldName, errorList) {
                         console.log(errorList[0])
                         $("#id_" + fieldName).next().text(errorList[0]);
                     })
                 }
             }
         })

     })
 }

 /*
    函数功能：为“获取验证码”按钮绑定点击事件
  */
 function bindClickBtnGetAuthCode() {
     $('#btnGetAuthCode').click(function () {
         // 每次获取验证码之前清空校验错误提示
         $('.error-msg').empty();
         // 发送ajax请求
         // 需要 1. cookie 中含有键 "csrftoken"
         //     2. post 参数中携带 csrfmiddlewaretoken
         $.ajax({
             url:"{% url 'auth_code_email' %}",
             method:"POST",
             // X-CRSFToken方便Ajax发送PUT/DELETE请求时Django服务器获取csrfmiddlewaretoken值
             // headers中X-CRSFToken为字符串，否则页面解析失败
             // headers: {'X-CRSFToken': csrfMiddleWareToken},

             // 这里我们使用的 POST 方法，在 data 中设置  csrfmiddlewaretoken 即可
             dataType: "JSON",
             data: {tpl: "code", /* tpl 指定使用邮箱的 register 模板 */
                    email: $('#id_email').val(),
                    csrfmiddlewaretoken: csrfMiddleWareToken
             },
             success: function (res) {
                 // ajax请求发送成功后，自动执行的函数，res为后端返回的值
                 if (res.status) {
                     sendEmailTimer();
                     // console.log(res.status);
                 } else {
                     // console.log(res);
                     // {status: False, email: ["error msg", ], code :["error msg", ]}}
                     $.each(res.errors, function (fieldName, errorList) {
                         console.log(errorList[0])
                         $("#id_" + fieldName).next().text(errorList[0]);
                     })
                 }
             },
         })
     })

     /*
        倒计时60s
      */
     function sendEmailTimer() {
         var $sendEmailBtn = $('#btnGetAuthCode');
         $sendEmailBtn.prop('disabled', true); // 计时过程中禁用按钮
         $sendEmailBtn.val('60秒后重新发送').prop('disabled', false);

         var time = 59;
         var timer = setInterval(function () {
             $sendEmailBtn.val(time+'秒后重新发送');
             time = time -1;
             if (time < 1) {
                 clearInterval(timer);
                 $sendEmailBtn.val('点击获取验证码').prop('disabled', false);
             }
         }, 1000)
     }
 }
</script>
{% endblock %}
